import { reqDeleteWork, reqGetWorkDetail, reqLikeWork, reqRecordWorkClick } from '@/api/hosting-style';
import { hostingStyleStore } from '@/stores/hosting-style-store';
import { getSafeArea } from '@/utils/others';
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
type WorkDetail = GetWorkDetailResData & { parsedImageList: string[] };
Page({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store: hostingStyleStore,
    actions: ['deleteWork', 'updateWorkLikeStatus'],
  },
  data: {
    workDetail: {} as WorkDetail,
    currentImgIndex: 0,
    safeArea: getSafeArea(),
    videoHeight: (getSafeArea().width * 9) / 16 + 'px',
    isPlayingVideo: false,
    isShowVideoControls: false,
  },
  onLoad(options) {
    this.checkAndGetWorkDetail(options);
    reqRecordWorkClick(Number(options.find_id));
  },
  async checkAndGetWorkDetail(options: AnyObject) {
    const { find_id } = options;
    if (!find_id) {
      wx.showToast({ title: '参数错误', icon: 'error' });
      setTimeout(() => {
        wx.navigateBack();
      });
      return;
    }

    try {
      const res = await reqGetWorkDetail(find_id);
      console.log('res', res);
      if (res.code !== 200) {
        throw new Error(res.msg);
      }

      this.setData({
        workDetail: {
          ...res.data,
          real_read_size: res.data.real_read_size + 1,
          find_id: Number(find_id),
          parsedImageList: JSON.parse(res.data.imageList),
        } as WorkDetail,
      });
      console.log('workDetail', this.data.workDetail);
    } catch (e: any) {
      wx.showToast({ title: e.message, icon: 'error' });
    }
  },
  onClickLeft() {
    wx.navigateBack({
      delta: 1,
      fail: () => {
        wx.navigateTo({ url: '/subpkg/pages/hosting-style/hosting-style' });
      },
    });
  },
  onLoadedMetaData(e: AnyObject) {
    this.setData({
      videoHeight: Math.min((e.detail.height / e.detail.width) * this.data.safeArea.width, this.data.safeArea.height * 0.7) + 'px',
    });
  },
  onClickVideoMask() {
    const videoCtx = wx.createVideoContext('video');
    videoCtx.play();
  },
  onPlayVideo() {
    this.setData({
      isPlayingVideo: true,
    });
  },
  onPauseVideo() {
    this.setData({
      isPlayingVideo: false,
    });
  },
  onClickFullScreen() {
    const videoCtx = wx.createVideoContext('video');
    videoCtx.requestFullScreen({});
  },
  onSwiperChange(e: WechatMiniprogram.SwiperChange) {
    this.setData({
      currentImgIndex: e.detail.current,
    });
  },
  async onClickLike() {
    try {
      const { find_id, isLike } = this.data.workDetail;
      if (isLike) {
        throw new Error('已经点过赞了');
      }
      const res = await reqLikeWork(find_id);
      console.log('res', res);
      if (res.code === 200) {
        this.updateWorkLikeStatus(find_id);
        this.setData({
          'workDetail.isLike': true,
          'workDetail.likes': this.data.workDetail.likes + 1,
        });
        return;
      }

      throw new Error(res.msg);
    } catch (error: any) {
      wx.showToast({
        title: error.message,
        icon: 'none',
      });
    }
  },
  async onClickDelete() {
    try {
      const confirmRes = await wx.showModal({
        content: '删除该条风采？',
        cancelColor: '#007AFF',
        confirmText: '删除',
        confirmColor: '#FF457A',
      });
      if (!confirmRes?.confirm) return;
      const res = await reqDeleteWork(this.data.workDetail.find_id);
      if (res.code === 200) {
        wx.showToast({ title: '删除成功', icon: 'success' });
        this.deleteWork(this.data.workDetail.find_id);
        setTimeout(() => {
          this.onClickLeft();
        }, 1000);
        return;
      }

      throw new Error(res.msg);
    } catch (e: any) {
      wx.showToast({ title: e.message, icon: 'none' });
    }
  },
});
